<!--
 * @Description: 告警模板配置页面
-->
<template>
  <BaseMainSlot :show-search-box="false">
    <template v-slot:btn-box>
      <ActionBar
        :page-no="20"
        :add-active="addActive"
        :del-active="delActive"
        :edit-active="editActive"
        :cancel-active="cancelActive"
        :has-cancel="false"
        :has-save="false"
        :has-edit="false"
        :save-active="saveActive"
        :has-edit-column="true"
        @showColumn="showColumn"
        @add="add"
        @cancel="cancel"
        @edit="edit"
        @del="del"
        @save="save"
      />
    </template>
    <template v-slot:table-box>
      <Table v-loading="loading" :prop-list="tableColumn" :list-data="tableData" @sortChange="changeTableSort" @handleSelectionChange="handleSelectionChange">
        <template v-slot:operation="{ row }">
          <template v-if="!row.index">
            <el-button class="text-btn-cursor" type="text" size="small" @click="dbHandleSee(row)"><i class="el-icon-view"></i> 查看</el-button>
            <el-button v-if="judgePermission(20, 'edit')" class="text-btn-cursor" type="text" size="small" @click="edit(row)"><i class="el-icon-edit-outline"></i> 修改</el-button>
            <el-button v-if="judgePermission(20, 'delete')" class="text-btn-cursor cursor-delete" type="text" size="small" @click="handleDelete(row)"><i class="el-icon-delete"></i> 删除</el-button>
          </template>
        </template>
      </Table>
      <Pagination :page-size="pageSize" :current-page="currentPage" :total-size="totalSize" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
      <!-- <DelDialog
        :del-dialog-visible="delDialogVisible"
        @confirmDel="confirmDel"
      /> -->
    </template>
    <template v-slot:dialog>
      <el-dialog :title="titleText + '告警模板信息'" :visible.sync="dialogFormVisible" :before-close="addCancel" width="40%">
        <el-form ref="formData" :rules="rules" label-position="left" :model="formData" class="el-form">
          <el-form-item label="模板名称:" class="w50p" prop="templateName">
            <el-input v-model="formData.templateName" clearable />
          </el-form-item>
          <el-form-item label="数据类型:" class="w50p" prop="dataTypeId">
            <el-select v-model="formData.dataTypeId" clearable placeholder="请选择数据类型" @change="addDataType">
              <el-option v-for="(item, index) in dataTypeList" :key="index" :value="item.dataTypeId" :label="item.dataTypeName" />
            </el-select>
          </el-form-item>
          <el-form-item label="发送间隔:" class="w50p" prop="sendingInterval">
            <el-input v-model="formData.sendingInterval" clearable />
          </el-form-item>
          <el-form-item label="滤波类型:" class="w50p" prop="filterType">
            <el-select v-model="formData.filterType" clearable>
              <el-option v-for="(item, index) in filterTypeList" :key="index" :value="item.name" :label="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="滤波值:" class="w50p" prop="filterValue">
            <el-input v-model="formData.filterValue" clearable />
          </el-form-item>
          <el-form-item label="告警通知配置:" class="w50p">
            <el-select v-model="formData.noticeConfigNo" clearable>
              <!-- @change="tifierChange" -->
              <el-option v-for="(item, index) in contactmanList" :key="index" :value="item.noticeConfigNo" :label="item.noticeConfigName" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item v-if="flagStatus" label="通知方式:" class="w50p">
            <el-checkbox
              v-model="flagData.cidFlag"
              disabled
              size="medium"
            >APP</el-checkbox>
            <el-checkbox
              v-model="flagData.weChatFlag"
              disabled
              size="medium"
            >微信</el-checkbox>
            <el-checkbox
              v-model="flagData.phoneFlag"
              disabled
              size="medium"
            >手机</el-checkbox>
            <el-checkbox
              v-model="flagData.emailFlag"
              disabled
              size="medium"
            >邮箱</el-checkbox>
          </el-form-item> -->
          <el-form-item label="上限列表:" class="w100p">
            <div
              v-if="
                nowChanceStau === 'add' ||
                  nowChanceStau === 'edit'
              "
            >
              <div class="line">
                <el-input v-model="basetopList.levelName" clearable placeholder="级别名称" />
                <el-input v-model="basetopList.thresholdValue" clearable type="number" placeholder="级别阈值" />
                <el-select v-model="basetopList.alarmTypeId">
                  <el-option v-for="(item, index) in alarmTypeList" :key="index" :label="item.alarmTypeName" :value="item.alarmTypeId" />
                </el-select>
                <div class="line-click" @click="addtopList()">
                  <i class="el-icon-plus"></i>
                </div>
              </div>
              <div v-for="(item, index) in nowtopList" :key="index" class="line">
                <el-input v-model="nowtopList[index].levelName" clearable placeholder="级别名称" />
                <el-input v-model="nowtopList[index].thresholdValue" clearable type="number" placeholder="级别阈值" />
                <el-select v-model="nowtopList[index].alarmTypeId">
                  <el-option v-for="(alarmTypeitem, alarmTypeindex) in alarmTypeList" :key="alarmTypeindex" :label="alarmTypeitem.alarmTypeName" :value="alarmTypeitem.alarmTypeId" />
                </el-select>
                <div class="line-click" @click="deltopList(index)">
                  <i class="el-icon-minus"></i>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="下限列表:" class="w100p">
            <div
              v-if="
                nowChanceStau === 'add' ||
                  nowChanceStau === 'edit'
              "
            >
              <div class="line">
                <el-input v-model="basebottomList.levelName" clearable placeholder="级别名称" />
                <el-input v-model="basebottomList.thresholdValue" type="number" clearable placeholder="级别阈值" />
                <el-select v-model="basebottomList.alarmTypeId">
                  <el-option v-for="(item, index) in alarmTypeList" :key="index" :label="item.alarmTypeName" :value="item.alarmTypeId" />
                </el-select>
                <div class="line-click" @click="addbottomList()">
                  <i class="el-icon-plus"></i>
                </div>
              </div>
              <div v-for="(item, index) in nowbottomList" :key="index" class="line">
                <el-input v-model="nowbottomList[index].levelName" clearable placeholder="级别名称" />
                <el-input v-model="nowbottomList[index].thresholdValue" type="number" clearable placeholder="级别阈值" />
                <el-select v-model="nowbottomList[index].alarmTypeId">
                  <el-option v-for="(alarmTypeitem, alarmTypeindex) in alarmTypeList" :key="alarmTypeindex" :label="alarmTypeitem.alarmTypeName" :value="alarmTypeitem.alarmTypeId" />
                </el-select>
                <div class="line-click" @click="delbottomList(index)">
                  <i class="el-icon-minus"></i>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
        <div v-if="nowChanceStau !== ''" slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancel('formData')">
            取 消
          </el-button>
          <el-button class="zh-button-two" type="primary" @click="save('formData')">
            保 存
          </el-button>
        </div>
      </el-dialog>
      <el-dialog :title="'查看' + '告警模板信息'" :visible.sync="dialogeSeeFormVisible" width="40%" @close="addCancel">
        <el-form ref="formData1" label-position="left" :model="formData1" class="el-form">
          <el-form-item label="模板名称:" class="w50p">
            <el-input v-model="formData1.templateName" clearable disabled />
          </el-form-item>
          <el-form-item label="数据类型:" class="w50p">
            <el-select v-model="formData1.dataTypeId" clearable disabled>
              <el-option v-for="(item, index) in dataTypeList" :key="index" :value="item.dataTypeId" :label="item.dataTypeName" />
            </el-select>
          </el-form-item>
          <el-form-item label="发送间隔:" class="w50p">
            <el-input v-model="formData1.sendingInterval" disabled clearable />
          </el-form-item>
          <el-form-item label="滤波类型:" class="w50p">
            <el-select v-model="formData1.filterType" clearable disabled>
              <el-option v-for="(item, index) in filterTypeList" :key="index" :value="item.name" :label="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="滤波值:" class="w50p">
            <el-input v-model="formData1.filterValue" disabled clearable />
          </el-form-item>
          <el-form-item label="告警通知配置:" class="w50p">
            <el-select v-model="formData1.noticeConfigNo" clearable disabled>
              <!-- @change="tifierChange" -->
              <el-option v-for="(item, index) in contactmanList" :key="index" :value="item.noticeConfigNo" :label="item.noticeConfigName" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item v-if="flagStatus" label="通知方式:" class="w50p">
            <el-checkbox
              v-model="flagData.cidFlag"
              disabled
              size="medium"
            >APP</el-checkbox>
            <el-checkbox
              v-model="flagData.weChatFlag"
              disabled
              size="medium"
            >微信</el-checkbox>
            <el-checkbox
              v-model="flagData.phoneFlag"
              disabled
              size="medium"
            >手机</el-checkbox>
            <el-checkbox
              v-model="flagData.emailFlag"
              disabled
              size="medium"
            >邮箱</el-checkbox>
          </el-form-item> -->
          <el-form-item label="上限列表:" class="w100p">
            <div>
              <div class="line">
                <el-input v-model="basetopList.levelName" disabled clearable placeholder="级别名称" />
                <el-input v-model="basetopList.thresholdValue" disabled clearable placeholder="级别阈值" />
                <el-select v-model="basetopList.alarmTypeId" disabled>
                  <el-option v-for="(item, index) in alarmTypeList" :key="index" :label="item.alarmTypeName" :value="item.alarmTypeId" />
                </el-select>
              </div>
              <div v-for="(item, index) in nowtopList" :key="index" class="line">
                <el-input v-model="nowtopList[index].levelName" disabled clearable placeholder="级别名称" />
                <el-input v-model="nowtopList[index].thresholdValue" disabled clearable placeholder="级别阈值" />
                <el-select v-model="nowtopList[index].alarmTypeId">
                  <el-option v-for="(alarmTypeitem, alarmTypeindex) in alarmTypeList" :key="alarmTypeindex" :label="alarmTypeitem.alarmTypeName" :value="alarmTypeitem.alarmTypeId" />
                </el-select>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="下限列表:" class="w100p">
            <div>
              <div class="line">
                <el-input v-model="basebottomList.levelName" disabled clearable placeholder="级别名称" />
                <el-input v-model="basebottomList.thresholdValue" disabled clearable placeholder="级别阈值" />
                <el-select v-model="basebottomList.alarmTypeId" disabled>
                  <el-option v-for="(item, index) in alarmTypeList" :key="index" :label="item.alarmTypeName" :value="item.alarmTypeId" />
                </el-select>
              </div>
              <div v-for="(item, index) in nowbottomList" :key="index" class="line">
                <el-input v-model="nowbottomList[index].levelName" disabled clearable placeholder="级别名称" />
                <el-input v-model="nowbottomList[index].thresholdValue" disabled clearable placeholder="级别阈值" />
                <el-select v-model="nowbottomList[index].alarmTypeId" disabled>
                  <el-option v-for="(alarmTypeitem, alarmTypeindex) in alarmTypeList" :key="alarmTypeindex" :label="alarmTypeitem.alarmTypeName" :value="alarmTypeitem.alarmTypeId" />
                </el-select>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog id="tableColumnDialog" title="配置列" :visible.sync="dialogTableColumnVisible">
        <tableColumn v-if="dialogTableColumnVisible" ref="tableColumn" :table-column="allTableColumn" @cancelColumn="cancelColumn" />
        <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="dialogTableColumnVisible = false">
            取 消
          </el-button>
          <el-button class="zh-button-two" type="primary" @click="saveColumn">
            保 存
          </el-button>
        </div>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>

<script>
import Table from '@/components/table/table.vue'
import ActionBar from '@/components/ActionBar'
import Pagination from '@/components/Pagination'
import nowpagereq from '@/api/digital-production/monitoring-alarm/alarm-template-configuration'
import contactreq from '@/api/digital-production/monitoring-alarm/system-notification-configuration'
import BaseMainSlot from '@/components/BaseMainSlot/newBaseMainSlot.vue'
// import BaseMainSlot from "@/components/BaseMainSlot"
// import DelDialog from "@/components/Dialog/delDialog.vue"
import { mymixin } from '@/utils/mixins'
import { mapGetters } from 'vuex'
export default {
  name: 'AlarmTemplateConfiguration',
  components: { Table, ActionBar, Pagination, BaseMainSlot },
  mixins: [mymixin],
  data() {
    return {
      tableColumn: [
        { prop: 'templateName', label: '模板名称' },
        { prop: 'dataTypeName', label: '数据类别' },
        { prop: 'sendingInterval', label: '发送间隔' },
        { prop: 'filterType', label: '滤波类型' },
        { prop: 'filterValue', label: '滤波值' },
        {
          prop: 'operation',
          label: '操作',
          slotName: 'operation',
          width: '200'
        }
      ],
      rules: {
        templateName: [
          {
            required: true,
            message: '模板名称不能为空！',
            trigger: ['change', 'blur']
          }
        ],
        dataTypeId: [
          {
            required: true,
            message: '数据类型不能为空！',
            trigger: ['change', 'blur']
          }
        ],
        sendingInterval: [
          {
            required: true,
            message: '发送间隔不能为空！',
            trigger: ['change', 'blur']
          }
        ],
        filterType: [
          {
            required: true,
            message: '滤波类型不能为空！',
            trigger: ['change', 'blur']
          }
        ],
        filterValue: [
          {
            required: true,
            message: '滤波值不能为空！',
            trigger: ['change', 'blur']
          }
        ]
      },
      templateName: '',
      // 确认删除弹框
      delDialogVisible: false,
      // 主要联系人
      zhuyaocontactmanId: '',
      checkedGroupone: [],
      checkedGrouptwo: [],
      // 联系人可选择列表
      contactmanList: [],
      // 联系方式可选择列表
      contactmetList: [
        {
          name: '手机'
        },
        {
          name: '邮箱'
        },
        {
          name: '微信'
        }
      ],
      // 上限列表
      basetopList: {
        levelName: '',
        alarmTypeId: '',
        thresholdType: 'max',
        thresholdValue: ''
      },
      flagData: {
        cidFlag: false,
        weChatFlag: false,
        phoneFlag: false,
        emailFlag: false
      },
      nowtopList: [],
      // 下限列表
      basebottomList: {
        alarmTypeId: '',
        levelName: '',
        thresholdType: 'min',
        thresholdValue: ''
      },
      nowbottomList: [],
      // 滤波类型
      nowfilterType: {},
      filterTypeList: [
        {
          name: '时间'
        },
        {
          name: '次数'
        }
      ],
      dataTypeList: [],
      // 告警类型下拉数据
      alarmTypeList: [],
      // 搜索内容
      searchList: {},
      // 选中的数据项数组 alarmContactId组成 (此数组最多为一个)
      selectIdList: [],
      dialogTitle: '',
      dialogFormVisible: false,
      dialogeSeeFormVisible: false,
      flagStatus: false,
      formData: {
        alarmTemplateId: '',
        templateName: '',
        sendingInterval: '',
        filterValue: '',
        filterType: '',
        dataTypeId: '',
        dataTypeName: '',
        noticeConfigNo: ''
      },
      formData1: {
        alarmTemplateId: '',
        templateName: '',
        sendingInterval: '',
        filterValue: '',
        filterType: '',
        dataTypeId: '',
        dataTypeName: '',
        noticeConfigNo: ''
      }
    }
  },
  computed: {
    ...mapGetters({
      judgePermission: 'permission/judgePermission'
    })
  },
  watch: {
    nowChanceStau: {
      handler(val) {
        if (val === '') {
          this.nowfilterType = {}
        }
      }
    }
  },
  created() {
    // 获取表格数据
    this.getTableDataList()
  },
  mounted() {
    this.getselectlist()
  },
  methods: {
    changeTableSort(column) {
      this.sortList = column.order
        ? [
          {
            property: column.prop,
            direction: column.order == 'ascending' ? 'asc' : 'desc'
          }
        ]
        : []
      this.getTableDataList()
    },
    // 添加一条上限数据
    addtopList() {
      if (this.nowChanceStau !== 'add' && this.nowChanceStau !== 'edit') {
        return
      }
      let addvalue = {
        alarmTypeId: '',
        levelName: '',
        thresholdType: 'max',
        thresholdValue: ''
      }
      this.nowtopList.push(addvalue)
    },
    // 删除一条上限数据
    deltopList(i) {
      if (this.nowChanceStau !== 'add' && this.nowChanceStau !== 'edit') {
        return
      }
      this.nowtopList.splice(i, 1)
    },
    // 添加一条下限数据
    addbottomList() {
      if (this.nowChanceStau !== 'add' && this.nowChanceStau !== 'edit') {
        return
      }
      let addvalue = {
        alarmTypeId: '',
        levelName: '',
        thresholdType: 'min',
        thresholdValue: ''
      }
      this.nowbottomList.push(addvalue)
    },
    // 添加一条下限数据
    delbottomList(i) {
      if (this.nowChanceStau !== 'add' && this.nowChanceStau !== 'edit') {
        return
      }
      this.nowbottomList.splice(i, 1)
    },
    // 获取下拉数据
    getselectlist() {
      // 获取所有数据类型
      nowpagereq.getalldatalist().then(res => {
        this.dataTypeList = res.data
      })
      // 获取所有联系人
      contactreq
        .querybycondition({ organizationNo: sessionStorage.organizationNo })
        .then(res => {
          this.contactmanList = res.data
        })
    },
    async tifierChange(item) {
      if (item) {
        this.flagStatus = true
        const { data: rs } = await contactreq.queryByNo(item)
        let flagData = JSON.parse(JSON.stringify(rs))
        this.flagData = flagData
      } else {
        this.flagStatus = false
        this.flagData = {
          cidFlag: false,
          weChatFlag: false,
          phoneFlag: false,
          emailFlag: false
        }
      }
    },
    // 将选择的数据类别添加到表单中 --获取告警类型列表
    addDataType(e) {
      this.alarmTypeList = []
      this.basetopList = []
      this.basebottomList = []
      this.nowbottomList = []
      this.nowtopList = []
      if (this.nowChanceStau === 'add' || this.nowChanceStau === 'edit') {
        this.dataTypeList.forEach(el => {
          if (el.dataTypeId === e) {
            this.formData.dataTypeId = el.dataTypeId
            this.formData.dataTypeName = el.dataTypeName
          }
        })
      }
      nowpagereq.getalarmTypelist(e).then(res => {
        let data = res.data
        this.chancealarmtype(data)
      })
    },
    // 处理数据类型数据
    chancealarmtype(list) {
      let newlist = []
      list.forEach((item, index) => {
        newlist.push(item.alarmType)
      })
      this.alarmTypeList = newlist
    },
    // 获取表格数据
    getTableDataList() {
      this.loading = true
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        sortList: this.sortList || []
      }
      nowpagereq.getlist(params).then(res => {
        this.loading = false
        if (res.code === 0) {
          this.$message.error('查询失败')
        }
        let data = res.data
        // 赋值总条数
        this.totalSize = data.totalElements
        // 赋值数组
        this.tableData = data.content
        this.addblankmet()
        this.resetActionBar()
      })
    },
    search() {
      this.currentPage = 1
      this.getTableDataList()
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize
      this.getTableDataList()
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage
      this.getTableDataList()
    },
    // 添加
    add() {
      this.addActive = false;
      this.basetopList = {}
      this.nowtopList = []
      this.alarmTypeList = []
      this.nowbottomList = []
      this.basebottomList = {}
      this.formData = {}
      this.openDialog('add')
      this.titleText = '新增'
    },
    // 取消
    // cancel() {
    //   this.closeDialog();
    //   this.formData = {}
    // },
    handleEdit(zhrow) {
      this.templateName = zhrow.templateName
      let row = JSON.parse(JSON.stringify(zhrow))
      if (row.alarmTemplateId) {
        this.formData = {
          alarmTemplateId: row.alarmTemplateId,
          templateName: row.templateName,
          sendingInterval: row.sendingInterval,
          filterValue: row.filterValue,
          filterType: row.filterType,
          dataTypeId: row.dataTypeId,
          dataTypeName: row.dataTypeName,
          noticeConfigNo: row.noticeConfigNo
        }
        this.formData = { ...this.formData }
        nowpagereq.getalarmTypelist(row.dataTypeId).then(res => {
          let data = res.data
          this.chancealarmtype(data)
        })
        this.addDataType({ name: row.dataTypeName, value: row.dataTypeId })
        row.alarmTemplateThresholdList.forEach(item => {
          if (item.charge === true) {
            this.zhuyaocontactmanId = item.alarmContactId
            this.checkedGroupone = []
            // 联系方式的赋值
            if (item.sendPhone === true) {
              this.checkedGroupone.push(0)
            }
            if (item.sendEmail === true) {
              this.checkedGroupone.push(1)
            }
            if (item.sendWeChat === true) {
              this.checkedGroupone.push(2)
            }
          }
          if (item.charge === false) {
            this.qitacontactmanId = item.alarmContactId
            this.checkedGrouptwo = []
            // 联系方式的赋值
            if (item.sendPhone === true) {
              this.checkedGrouptwo.push(0)
            }
            if (item.sendEmail === true) {
              this.checkedGrouptwo.push(1)
            }
            if (item.sendWeChat === true) {
              this.checkedGrouptwo.push(2)
            }
          }
        })
        let mainlist = row.alarmTemplateThresholdList
        // 上限列表和下限列表的赋值
        this.basetopList = {
          levelName: '',
          alarmTypeId: '',
          thresholdType: 'max',
          thresholdValue: ''
        }
        this.nowtopList = []
        this.basebottomList = {
          levelName: '',
          alarmTypeId: '',
          thresholdType: 'min',
          thresholdValue: ''
        }
        this.nowbottomList = []
        if (mainlist) {
          for (var i = 0; i < mainlist.length; i++) {
            if (mainlist[i].thresholdType === 'max') {
              if (this.basetopList.levelName.length === 0) {
                this.basetopList = mainlist[i]
              } else {
                this.nowtopList.push(mainlist[i])
              }
            } else if (mainlist[i].thresholdType === 'min') {
              if (this.basebottomList.levelName.length === 0) {
                this.basebottomList = mainlist[i]
              } else {
                this.nowbottomList.push(mainlist[i])
              }
            }
          }
        }
      }
    },
    dbHandleSee(row) {
      this.formData1 = {
        alarmTemplateId: row.alarmTemplateId,
        templateName: row.templateName,
        sendingInterval: row.sendingInterval,
        filterValue: row.filterValue,
        filterType: row.filterType,
        dataTypeId: row.dataTypeId,
        dataTypeName: row.dataTypeName,
        noticeConfigNo: row.noticeConfigNo
      }
      let mainlist = row.alarmTemplateThresholdList
      // 上限列表和下限列表的赋值
      this.basetopList = {
        levelName: '',
        alarmTypeId: '',
        thresholdType: 'max',
        thresholdValue: ''
      }
      this.nowtopList = []
      this.basebottomList = {
        levelName: '',
        alarmTypeId: '',
        thresholdType: 'min',
        thresholdValue: ''
      }
      this.nowbottomList = []
      if (mainlist) {
        for (var i = 0; i < mainlist.length; i++) {
          if (mainlist[i].thresholdType === 'max') {
            if (this.basetopList.levelName.length === 0) {
              this.basetopList = mainlist[i]
            } else {
              this.nowtopList.push(mainlist[i])
            }
          } else if (mainlist[i].thresholdType === 'min') {
            if (this.basebottomList.levelName.length === 0) {
              this.basebottomList = mainlist[i]
            } else {
              this.nowbottomList.push(mainlist[i])
            }
          }
        }
      }
      this.dialogeSeeFormVisible = true
      this.$nextTick(() => {
        this.$refs.formData.resetFields()
      })
    },
    handleSelectionChange(list) {
      this.selectIdList = []
      let notvalue = true
      this.selectIdList = list.map(item => {
        if (item.alarmTemplateId) {
          return item.alarmTemplateId
        } else {
          notvalue = false
          return ''
        }
      })
      if (notvalue === false) {
        this.$message.warning('不可选择空数据！')
        return
      }
      if (this.selectIdList) {
        if (this.selectIdList.length > 0) this.delActive = true
        else this.delActive = false
      }
    },
    delmessage() {
      nowpagereq.dellist(this.selectIdList).then(res => {
        if (res.code === 1) {
          this.$message.success('删除成功')
          this.getTableDataList()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    handleDelete(data) {
      // nowpagereq.dellist([data.alarmTemplateId]).then(res => {
      //   if (res.code === 1) {
      //     this.$message.success("删除成功");
      //     this.getTableDataList();
      //   } else {
      //     this.$message.error("删除失败");
      //   }
      // });
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'myClass'
      })
        .then(() => {
          nowpagereq.dellist([data.alarmTemplateId]).then(res => {
            if (res.code === 1) {
              this.$message.success('删除成功')
              this.getTableDataList()
            } else {
              this.$message.error('删除失败')
            }
          })
        })
        .catch(() => {
          //
          this.$message('取消删除')
        })
    },
    save() {
      this.$refs.formData.validate(valid => {
        if (valid) {
          if (this.nowChanceStau === 'edit') {
            let editparams = {
              alarmTemplateSendMapperList: [
                // 主要联系人
                {
                  alarmContactId: this.zhuyaocontactmanId,
                  charge: true,
                  sendPhone: false,
                  sendEmail: false,
                  sendWeChat: false
                },
                // 其他联系人
                {
                  alarmContactId: this.qitacontactmanId,
                  charge: false,
                  sendPhone: false,
                  sendEmail: false,
                  sendWeChat: false
                }
              ],
              alarmTemplateThresholdList: [],
              ...this.formData
            }
            if (editparams.alarmTemplateSendMapperList === []) {
              delete editparams.alarmTemplateSendMapperList
            }
            this.basetopList['thresholdType'] = 'max'
            this.basebottomList['thresholdType'] = 'min'
            let newlevellist = [
              // 上限数据
              { ...this.basetopList },
              ...this.nowtopList,
              { ...this.basebottomList },
              // 下限数据
              ...this.nowbottomList
            ]
            newlevellist.forEach(el => {
              editparams['alarmTemplateThresholdList'].push(el)
            })
            if (newlevellist === []) {
              delete editparams.alarmTemplateThresholdList
            }
            // 编辑接口
            nowpagereq.editlist(editparams).then(res => {
              if (res.code === 1) {
                this.$message.success('修改成功！')
                this.closeDialog()
                this.getTableDataList()
              } else {
                this.$message.error('修改失败！')
              }
            })
          } else if (this.nowChanceStau === 'add') {
            let addparams = {
              alarmTemplateSendMapperList: [
              ],
              alarmTemplateThresholdList: [
              ],
              ...this.formData
            }
            if (addparams.alarmTemplateSendMapperList === []) {
              delete addparams.alarmTemplateSendMapperList
            }
            this.basetopList['thresholdType'] = 'max'
            this.basebottomList['thresholdType'] = 'min'
            let newlevellist = [
              // 上限数据
              { ...this.basetopList },
              ...this.nowtopList,
              { ...this.basebottomList },
              // 下限数据
              ...this.nowbottomList
            ]
            newlevellist.forEach(el => {
              addparams['alarmTemplateThresholdList'].push(el)
            })
            if (newlevellist === []) {
              delete addparams.alarmTemplateThresholdList
            }
            // console.log(addparams); return
            nowpagereq.addlist(addparams).then(res => {
              if (res.code === 1) {
                this.$message.success('新增成功！')
                this.closeDialog()
                this.getTableDataList()
              } else {
                this.$message.error('新增失败！')
              }
            })
          }
        } else {
          return false
        }
      })
    },
    openDialog(type) {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.formData = { ...this.formData }
        this.$refs.formData.resetFields()
      })
      this.dialogTitle = type === 'add' ? '新增' : '编辑'
      this.nowChanceStau = type
    },
    closeDialog() {
      this.$nextTick(() => {
        this.$refs.formData.resetFields()
      })
      this.dialogFormVisible = false
      this.dialogTitle = null
      this.nowChanceStau = ''
    },
    addCancel() {
      this.formData = {}
      this.closeDialog('add')
      this.addActive = true
    }
  }
}
</script>

<style scoped lang="scss">
.line {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  .line-click {
    width: 90px;
    height: 30px;
    // background-color: aqua;
    display: flex;
    justify-content: center;
    align-items: center;
    border: snow 1px solid;
    border-radius: 50%;
    margin-bottom: 10px;
    margin-top: 5px;
    margin-left: 5px;
    cursor: pointer;
  }
}
</style>
